<template>
  <div class='container'>
  <!-- 外层弹层组件 -->
  <el-dialog :title="showTitle"  :visible="showDialog" @close="btnCancel" >
  <!-- 表单数据 -->
    <el-form label-width="100px" :model="formData" :rules="rules" ref="artForm">

      <el-form-item  label="文章标题" width='100%' prop="title">
        <el-input  v-model="formData.title" style="width:100%" placeholder="请输入文章标题" />
      </el-form-item>

      <el-form-item  label="文章内容" prop="articleBody">
          <quill-editor v-model="formData.articleBody" :options="editorOption"  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
            </quill-editor>
      </el-form-item>

      <el-form-item   label="视屏地址" prop="videoURL">
        <el-input v-model="formData.videoURL" style="width:100%"/>
      </el-form-item>

    </el-form>
    <!-- /表单数据 -->

    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel()">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK()">确定</el-button>
        </el-col>
      </el-row>
    </template>
     <!-- footer插槽 -->

  </el-dialog>
   <!-- /外层弹层组件 -->
  </div>
</template>

<script>

// 引入新增
import { add, detail, update } from '@/api/hmmm/articles.js'
export default {
  name: 'Dialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '编辑文章' : '新增文章'
    }
  },
  data () {
    return {
      // 表单数据
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 自定义富文本
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote', 'code-block'], // 引用，代码块
            [{ align: [] }], // 居中
            ['clean'] // 清除样式
          ]
        }
      },
      // 表单校验
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }

      //
    }
  },
  methods: {
    // 获取详情，回写数据
    async handleDetail (id) {
      const res = await detail({ id: id })
      this.formData = res.data
    },
    onEditorBlur () { // 失去焦点事件
    },
    onEditorFocus () { // 获得焦点事件
    },
    onEditorChange () { // 内容改变事件
    },
    // 取消
    resetForm () {
      this.formData = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$refs.artForm.resetFields()
      this.showDialog = false
    },
    query () {
      this.formData = {

      }
    },
    // 确定
    btnOK () {
      try {
        this.$refs.artForm.validate(async (isOk) => {
          // 如果编辑
          if (this.formData.id && isOk) {
            await update(this.formData)
            this.$message.success('操作成功')
            this.$emit('changeDialog', false)

            this.$emit('addSkill')
          } else
          // 如果新增

          if (isOk) {
            await add(this.formData)
            this.$emit('addSkill')
            this.query()
            this.$message.success('操作成功')
            this.$emit('changeDialog', false)
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 取消
    btnCancel () {
      this.formData = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$emit('changeDialog', false)
      this.$refs.artForm.resetFields()
    }
  }

}

</script>

<style scoped lang='less'>
/deep/ div.ql-editor{
  height: 200px;
  height:200px !important
}
</style>
